<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>带阴影弹窗</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            }
            #map{
                position: relative;
                height: 553px;
                border:1px solid #3473b7;
            }
        </style>
		<!--<link href='./css/bootstrap.min.css' rel='stylesheet' />-->
		<!--<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />-->
        <script src='../libs/SuperMap.Include.js'></script>
        <script type="text/javascript">
			var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
            var map, layerWorld, marker, markers, framedCloud;
            var url=host+"/iserver/services/map-world/rest/maps/World";
			
			function init(){
				vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
				//map上添加控件
                map = new SuperMap.Map("map",{controls: [
					new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.LayerSwitcher(),
					new SuperMap.Control.Navigation({  //添加导航控件到map
                        dragPanOptions: {
                            enableKinetic: true    //拖拽动画
                        }
                    })]
                });

				//定义layerWorld图层，获取图层服务地址
				layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
				//为图层初始化完毕添加layerInitialized事件
				layerWorld.events.on({"layerInitialized": addLayer});
				//初始化标记图层类
				markers = new SuperMap.Layer.Markers("Markers");
				size = new SuperMap.Size(21,25); 
				offset = new SuperMap.Pixel(-(size.w/2), -size.h); 
				icon = new SuperMap.Icon('images/markerbig_select.png', size, offset); 
				//初始化标记覆盖物类
				marker = new SuperMap.Marker(new SuperMap.LonLat(-0.1779146,51.4877081),icon);
				
				//添加覆盖物到标记图层
				markers.addMarker(marker);
				//注册 click 事件,触发 mouseClickHandler()方法
				marker.events.on({"click":mouseClickHandler,
				"touchstart":mouseClickHandler    //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
				});
			}
			var infowin = null;
			//定义mouseClickHandler函数，触发click事件会调用此函数
			function mouseClickHandler(event){ 
				closeInfoWin();
				
				var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>"; 
				contentHTML += "伦敦贝克街221号B";
				contentHTML += "</div>"; 
				
				//初始化FramedCloud类
				framedCloud = new SuperMap.Popup.FramedCloud(
				    "chicken", 
                    marker.getLonLat(),
					null,
					contentHTML,
					icon,
                    true,
					null,
                    true
				);

				infowin = framedCloud;
                map.addPopup(framedCloud);
			}
			
			function closeInfoWin(){
                if(infowin){
                    try{
                        infowin.hide();
                        infowin.destroy();
                    }
                    catch(e){}
                }
            }
				
			//定义addLayer函数，触发 layerInitialized事件会调用此函数
			function addLayer(){
				//map上添加分块动态REST图层和标记图层
				map.addLayers([layerWorld,markers]);   
                map.setCenter(new SuperMap.LonLat(0, 50), 4);
            }
			</script>
    </head>
    <body onload="init()">
        <div id="map"></div>
    </body>
</html>
